<template lang="html">
	<div class="message" >
		<div  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<div class="list" v-for='(l, index) in list' @click="jump(l, index)" >
				<div class="container">
		
					<div class="left">
						<img class="avatar":src="l.headimgurl" alt="">
					</div>
					<div class="right">
						<div class="title" v-html="l.title">
							
						</div>
						<div class="bottom">
							<div class="date">
								{{l.date}}
							</div>
							<div class="answer">
								{{l.answerNum || 0}}个回答
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="center  " style="border-bottom: 1px solid #fff;height:30px" v-show="isshow">
			<div class="mint-cell-value jztitle">加载中</div>
			<div class="mint-cell-value">
				<span><mt-spinner  type="fading-circle"></mt-spinner></span>
			</div>
		</div>
		<div v-show="iswushow" class="center  wutitle" style="border-bottom: 1px solid #fff;height:30px  ">
			我们是有底线的
		</div>
	</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {queryProblem} from "@/components/common/API/msgboard";
export default {
	data() {
		return {
			pageNum: 0,
			pageLimit: 10,
			pageCount: 99,
			loading: false,
			isshow: false,
			iswushow: false,
			queryterm:'',
			list: [
				// {
				// 	title: '小升初如何学好英语1？',
				// 	date: '2018-06-02',
				// 	answerNum: '15',
				// 	headimgurl: '@/components/common/images/avatar1.jpg',
				// 	id: 0,
				// },
				// {
				// 	title: '小升初如何学好英语2？',
				// 	date: '2018-05-08',
				// 	answerNum: '4',
				// 	headimgurl: '@/components/common/images/avatar2.jpg',
				// 	id: 1,
				// },
				// {
				// 	title: '小升初如何学好英语3？',
				// 	date: '2018-05-02',
				// 	answerNum: '8',
				// 	headimgurl: '@/components/common/images/avatar3.jpg',
				// 	id: 2,
				// },
				// {
				// 	title: '小升初如何学好英语4？',
				// 	date: '2018-05-15',
				// 	answerNum: '0',
				// 	headimgurl: '@/components/common/images/avatar4.jpg',
				// 	id: 3,
				// },
			]
		}
	},
	methods: {
		jump(l, index) {
			this.log('点击到了', 'l', l, 'index', index)
			let id = this.list[index].id
			this.$router.push({
				path: '/detail',
				query: {
					id: id,
				}
			})
		},
		loadMore(){
			let total = (this.pageCount - (this.pageNum * this.pageLimit))>0
			if (!total) {
				this.iswushow = true
				this.isshow = false
				this.loading=true
			} else {
				this.isshow = true
				this.pageNum++
				this.queryProblem()
			}
		},
		queryProblem(){
			let data={
				pageNum:this.pageNum,		//	页数	
				pageLimit:this.pageLimit,	//每页条数
				queryterm:this.queryterm,	//输入的条件
				moduleid:this.vuexmoduleid  //选择的模块
			}
			queryProblem(data).then((res)=>{
				let msg=res.subProblem
				msg.map((elem,index)=>{
					elem.title=elem.title.replace(eval("/"+this.queryterm+"/g"),"<span style='background-color: #7586db;color:white'>"+this.queryterm+"</span>");
					 return elem
				})
				res.subProblem=msg
				this.list=this.list.concat(res.subProblem)
				this.pageCount=res.titleNum[0].titleNum
				this.isshow = false
			})
		},
		childqueryinfo(msg){
			this.queryterm=msg;
			this.pageNum=1;
			this.list=[];
			this.queryProblem()
		}
	},
	watch:{
		vuexmoduleid(){
			// console.log(this.vuexmoduleid)
			this.queryterm=''
			this.pageNum=1;
			this.list=[];
			this.queryProblem()
		}
	},
	computed:{
		...mapGetters([
		  'vuexmoduleid',
		]),
		vuexmoduleid(){
			return this.$store.state.vuexmoduleid
		}
	}

}
</script>

<style lang="scss" scoped>
@import '../common/base';
.jztitle{
	float:left;
	margin-right:10px; 
	font-size: 40px;
	color: #888;
}
.wutitle{
	color: #888;
	font-size: 30px;
}
.center{
		display: flex;
	 justify-content:center;
	 border-bottom: 1px solid #fff;
}
.mint-cell-value {
    color: #888;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.message {
	margin: 0 30px;
	margin-top: 10px;
	.list {
		height: 128px;
		border-bottom: 1px solid #707070;
		position: relative;
		img {
			height: 56px;
			width: 56px;
			border-radius: 50px;
		}
		.container {
			position: relative;
			top: 20px;
			display: flex;
			.left {
				margin-left: 20px;
				margin-right: 15px;
				.avatar {
					position: relative;
					// top: 10px;
				}
			}
			.right {
				position: relative;
				.title {
					font-size: 34px;
				}
			}
			.bottom {
				display: flex;
				margin-top: 20px;
				color: #999;
				font-size: 22px;
				height: 20px;
				line-height: 20px;
				.date {
					margin-right: 15px;
				}
				.answer {
					padding-left: 15px;
					border-left: 1px solid #999;
				}
			}
		}
	}
}
</style>
